<template>
  <!-- 菜单 -->
  <a-menu
    v-model:selectedKeys="selectedKeys"
    theme="light"
    :mode="mode"
    :style="{ lineHeight: '64px' }"
    @click="handleSelect"
  >
    <a-menu-item v-for="item in menuList" :key="item.key" >
      <template #icon>
        <component :is="item.icon"></component>
      </template>
      {{ item.menuItem }}
    </a-menu-item>
  </a-menu>
</template>

<script setup>
import { reactive, toRefs, useAttrs,defineEmits } from "vue";
import { useRouter,useRoute } from 'vue-router';
import {
  HomeOutlined,
  AppstoreOutlined,
  CommentOutlined,
} from "@ant-design/icons-vue";

const emit = defineEmits(['closeMenu']);

let attrs = useAttrs();
let props = defineProps({
  mode: {
    type: String,
    default: "horizontal",
  },
});

const router = useRouter();
const route = useRoute();

let data = reactive({
  menuList: [
    { key: "/home", menuItem: "主页", icon: HomeOutlined(props, attrs) },
    { key: "/resources", menuItem: "资源", icon: AppstoreOutlined(props, attrs) },
    { key: "/community", menuItem: "交流社区", icon: CommentOutlined(props, attrs) },
  ],
  selectedKeys: ["/home"],
});

let { selectedKeys, menuList } = toRefs(data);

// 解决因为直接输入路径，菜单与响应页面不一致的问题
selectedKeys.value = [route.path];

function handleSelect({ key }) {
  router.push(key);
  props.mode === 'horizontal' || emit("closeMenu");
}
</script>

<style scoped>
</style>